<template>
	<view class="box">
		
		<view class="one">
			<text style="color: white; font-size: 50rpx; margin-left: 30rpx; display: block; line-height: 200rpx; float: left;" @click="fanhui">✖</text>
			<text style="color: white; margin-left: 330rpx; font-size: 46rpx; letter-spacing: 3rpx; display: block; line-height: 200rpx;">注册</text>
		</view>
		
		<view class="two">
			<view class="two_one">
				<text>负责人:</text>
				<!-- <text style="float: right;">绑定数据库数据</text> -->
				<input class="focuss" type="text" value="绑定数据库数据" />
			</view>
			<view class="two_one">
				<text>身份证号码:</text>
				<!-- <text style="float: right;">绑定数据库数据</text> -->
			</view>
			<view class="two_one">
				<text>手机号:</text>
				<!-- <text style="float: right;">绑定数据库数据</text> -->
			</view>
			<view class="two_one">
				<text>验证码:</text>
				<!-- <text style="float: right;">绑定数据库数据</text> -->
				<view class="fenge">
					<input type="text" maxlength="4" placeholder="输入验证码" />
					<text style="margin-left: -10rpx; color: #9b9b9b;">|</text>
					<text style="color: #3082FB; margin-left: 10rpx;">获取验证码</text>
				</view>
			</view>
			<view class="two_one">
				<text>店名:</text>
				<!-- <text style="float: right;">绑定数据库数据</text> -->
			</view>
			<view class="two_one">
				<text>工商营业执照号码:</text>
				<!-- <text style="float: right;">绑定数据库数据</text> -->
			</view>
			<view class="two_one">
				<text>经营区域:</text>
				<!-- <text style="float: right;">绑定数据库数据</text> -->
			</view>
			<view class="two_one" style="margin-bottom: 0;">
				<text>地址:</text>
				<!-- <text style="float: right;">绑定数据库数据</text> -->
			</view>
		</view>
		
		<view class="three">
			<text>商家简介</text>
			<text class="three_one" style="display: block;">绑定数据库数据</text>
		</view>
		
		<view class="four">
			<text style="float: left;">身份证正反面照片</text>
			<view class="four_one" style="margin-left: -200rpx;">
				数据库照骗
			</view>
			<view class="four_one">
				数据库照骗
			</view>
			<view class="sc" >
				<text style="display: block; color: #9b9b9b; margin-top: 10rpx; font-size: 60rpx; text-align: center;">ꀗ</text>
				<text style="color: #bfbfbf; font-size: 26rpx; margin-left: 20rpx;">上传照片</text>
			</view>
		</view>
		
		<view class="five">
			<text style="float: left;">营业执照</text>
			<view class="five_one">
				数据库照骗
			</view>
			<view class="sc fc" >
				<text style="display: block; color: #9b9b9b; margin-top: 10rpx; font-size: 60rpx; text-align: center;">ꀗ</text>
				<text style="color: #bfbfbf; font-size: 26rpx; margin-left: 20rpx;">上传照片</text>
			</view>
		</view>
		
		<view class="six">
			<text style="float: left;">门店照片</text>
			<view class="six_one">
				数据库照骗
				
			</view>
			<view class="sc fc" >
				<text style="display: block; color: #9b9b9b; margin-top: 10rpx; font-size: 60rpx; text-align: center;">ꀗ</text>
				<text style="color: #bfbfbf; font-size: 26rpx; margin-left: 20rpx;">上传照片</text>
			</view>
		</view>
		
		<view class="seaven">
			<button>保存</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			fanhui(){
				uni.redirectTo({
					url: '/pages/lcl-ShangHuZiLiao/ziliao/ziliao'
				})
			}
		}
	}
</script>

<style scoped>
.box{
	background-color: #fafafa;
	padding-bottom: 200rpx;
	font-size: 26rpx;
}

/* input[type="text"]:focus {
      color: black;
    } */

.one{
	height: 400rpx;
	width: 100%;
	background-color: #297EFA;
	color: white;
	font-size: 40rpx;
	letter-spacing: 5rpx;
	box-sizing: border-box;
	padding-top: 50rpx;
	/* z-index: 10; */
}

.two{
	width: 710rpx;
	height: 600rpx;
	background-color: white;
	box-shadow: 2rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);
	border-radius: 15rpx;
	margin: 0 auto;
	margin-top: -180rpx;
	box-sizing: border-box;
	padding: 40rpx 20rpx;
	font-weight: 550;
}
.two_one{
	height: 50rpx;
	/* background-color: aquamarine; */
	line-height: 50rpx;
	margin-bottom: 30rpx;
}
 /* 默认情况下，输入框的文字颜色为灰色 */
     .two_one input {
       color: #c4c4c4;
       width: 360rpx;
       padding: 5rpx 20rpx;
       float: right;
       border-radius: 40rpx;
       border: 1rpx solid #e2e2e2;
       font-size: 24rpx;
       outline: none; /* 移除默认的聚焦边框 */
     }
 
     /* 当输入框获得焦点时，文字颜色变为黑色 */
     .focuss:focus {
       color: black;
     }

.three{
	width: 710rpx;
	height: 300rpx;
	background-color: white;
	box-shadow: 2rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);
	border-radius: 15rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	box-sizing: border-box;
	padding: 30rpx 20rpx;
	font-weight: 550;
}
.three_one{
	/* background-color: aquamarine; */
	height: 170rpx;
	margin-top: 30rpx;
	overflow: hidden; /* 隐藏超出部分 */
	text-overflow: ellipsis; /* 显示省略号 */
	border: 1rpx solid #dfdfdf;
	border-radius: 15rpx;
	box-sizing: border-box;
	padding: 20rpx;
}

.four{
	width: 710rpx;
	height: 300rpx;
	background-color: white;
	box-shadow: 2rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);
	border-radius: 15rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	box-sizing: border-box;
	padding: 30rpx 20rpx;
	font-weight: 550;
}
.four_one{
	width: 150rpx;
	height: 150rpx;
	background-color: #f7f7f7;
	/* background-color: #297EFA; */
	margin-top: 30rpx;
	box-sizing: border-box;
	float: left;
	margin-right: 40rpx;
	margin-top: 60rpx;
	padding: 30rpx 0;
	/* background-image: url('../../../static/图层 3.png'); */
}
.sc{
	/* background-color: #ebebeb; */
	width: 150rpx;
	height: 150rpx;
	border-radius: 15rpx;
	margin-top: 60rpx;
	border: 1rpx solid #c8c8c8;
	background-image: linear-gradient(to bottom, white, white, #dcdcdc);
	box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
	float: left;
	margin-right: 40rpx;
}
.fc{
	margin-top: -160rpx;
	margin-left: 180rpx;
}
.fenge{
	width: 400rpx;
	/* background-color: chocolate; */
	height: 60rpx;
	float: right;
	box-sizing: border-box;
	padding: 20rpx;
	border-radius: 40rpx;
	border: 1rpx solid #dfdfdf;
}
.fenge input{
	width: 180rpx;
	/* background-color: #297EFA; */
	margin-top: -20rpx;
	margin-left: -20rpx;
	float: left;
	border: none;
}
.fenge text{
	float: left;
	margin-top: -20rpx;
	font-size: 28rpx;
}

.five{
	width: 710rpx;
	height: 300rpx;
	background-color: white;
	box-shadow: 2rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);
	border-radius: 15rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	box-sizing: border-box;
	padding: 30rpx 20rpx;
	font-weight: 550;
}
.five_one{
	width: 150rpx;
	height: 150rpx;
	background-color: #f7f7f7;
	/* background-color: #297EFA; */
	margin-top: 30rpx;
	box-sizing: border-box;
	/* float: left; */
	margin-right: 40rpx;
	margin-top: 60rpx;
	padding: 20rpx 0;
	/* background-image: url('../../../static/图层 3.png'); */
}

.six{
	width: 710rpx;
	height: 300rpx;
	background-color: white;
	box-shadow: 2rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);
	border-radius: 15rpx;
	margin: 0 auto;
	margin-top: 20rpx;
	box-sizing: border-box;
	padding: 30rpx 20rpx;
	font-weight: 550;
}
.six_one{
	width: 150rpx;
	height: 150rpx;
	background-color: #f7f7f7;
	/* background-color: #297EFA; */
	margin-top: 30rpx;
	box-sizing: border-box;
	/* float: left; */
	margin-right: 40rpx;
	margin-top: 60rpx;
	/* padding: 20rpx 0; */
	/* background-image: url('../../../static/图层 3.png'); */
	border-radius: 15rpx;
}
.six_one image{
	border-radius: 15rpx;
}

.seaven button{
	margin-top: 100rpx;
	width: 600rpx;
	border-radius: 40rpx;
	background-color: #0D65E8;
	color: white;
	letter-spacing: 5rpx;
	font-size: 40rpx;
	font-family: cursive;
	background-image: linear-gradient(to bottom right, white, transparent,transparent,transparent,transparent);
}
</style>
